<template>
    <div>
        <div class="body-content">
            <div class="content-main">
                <div class="index-bdr">
                    <div class="swiper-container banner-swiper">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide" v-for="(item,index) in bannerlist" :key="index">
                                <img :src="getImage(item.url)"/>
                                <div class="text">
                                    <p class="p3 adapt-pc" style="margin-top:240px;">
                                        <router-link :to="{ path: '/ProjectDetail', query:{ id:item.projectId } }">
                                        快速了解项目
                                        </router-link>
                                    </p>
                                    <p class="p3 adapt-m">
                                       <router-link :to="{ path: '/ProjectDetail', query:{ id:item.projectId } }">
                                        快速了解项目
                                        </router-link>
                                    </p>
                                </div>
                            </div>                               
                        </div>
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
            </div>

            <!-- =============================== 手机版 ================================ -->
            <div class="index-m-nav">
                <div class="index-nav-box">
                    
                    <router-link to="evaluate">
                        <img src="@/assets/picture/index-nav-1.svg" alt="">
                        <span>移民评估</span>
                    </router-link>
                    <router-link to="Project">
                        <img src="@/assets/picture/index-nav-3.svg" alt="">
                        <span>移民项目</span>
                    </router-link>
                    <router-link to="House">
                        <img src="@/assets/picture/index-nav-house.svg" alt="">
                        <span>热门房产</span>
                    </router-link>
                    <router-link to="information">
                        <img src="@/assets/picture/index-nav-collect.svg" alt="">
                        <span>领取资料</span>
                    </router-link>
                    
                </div>
                <!-- <div class="index-nav-box">
                    <a target="_blank">
                        <img src="@/assets/picture/index-nav-4.svg" alt="">
                        <span>最新资讯</span>
                    </a>
                    <a class="Js-zixun" target="_blank">
                        <img src="@/assets/picture/index-nav-2.svg" alt="">
                        <span>在线预约</span>
                    </a>
                    <a href="" target="_blank">
                        <img src="@/assets/picture/index-nav-5.svg" alt="">
                        <span>服务优势</span>
                    </a>
                    <a href="" target="_blank">
                        <img src="@/assets/picture/index-nav-6.svg" alt="">
                        <span>关于我们</span>
                    </a>
                </div> -->
            </div>
                
            <div class="index-m-bdr">
                <ul>
                    <li>
                        <!-- 打开对话框 -->
                        <a href="javascript:;" class="Js-zixun"><img src="" alt=""><span><em>找专家</em><br>定制移民方案</span></a>
                    </li>
                    <li>
                        <router-link to="evaluate"><img src="" alt=""><span><em>条件测试</em><br>您适合那些项目</span></router-link>
                    </li>
                </ul>
            </div>
            <div class="index-m-main">
                <div class="index-m-title">
                    <h2>热门项目 HOT PROJECT</h2>
                    <!-- <p>发现合适您的省份</p> -->
                </div>
                <ul>
                    <li v-for="(item,index) in projectlist" :key="index">
                        <router-link :to="{ path: '/ProjectDetail', query:{ id:item.id } }">
                            <a href="javascript:;" :style="{'background-image': 'url('+getImage(item.projectImage.split('###')[0])+')'}" target="_blank">
                                <div class="text-info">
                                    <span>{{item.projectName}}</span>
                                </div>
                            </a>
                        </router-link>
                    </li>
                </ul>
            </div>

            <!-- 热门房产 start -->
            <div class="index-house adapt-m">
                <div class="index-m-title">
                    <h2 class="b">热门房产</h2>
                    <p>为您精心筛选优质的房源</p>
                </div>
                <div class="houselist w"> 
                    <!-- 循环 开始 （6个） -->
                    <a class="houseitem" v-for="(item,index) in houselist" :key="index">
                        <router-link :to="{path:'/HouseDetail',query:{id:item.id}}">
                            <div class="bg-img img" :style="{'background-image': 'url('+getImage(item.bannerUrl[0])+')'}">
                                <p class="national-info">{{item.address.split('###')[0]}}</p>
                            </div>
                            <div class="baseinfo text">
                                <h2 class="name">{{item.name}}</h2>
                                <p class="description f-light">{{item.layout}}／{{item.usedArea}}㎡</p>
                            </div>
                            <div class="trend text">
                                <p class="price f-light">
                                     <span class="stress value">{{item.price.split("###")[0]}}</span>
                                </p>
                            </div>
                        </router-link>
                    </a>
                    <!-- 循环 结束 -->
                </div>
                <a class="index-m-all"><router-link to="House">查看更多房源</router-link></a>
            </div> 
            <!-- 热门房产 end -->

            <!-- 资讯活动 start -->
            <div class="index-m-art" style="padding-bottom:20px;">
                <div class="index-m-title">
                    <h2 class="b">资讯活动 NEWS</h2>
                </div>
                <div class="over">
                    <div class="index-m-xauto">
                        <ul class="box">
                            <li v-for="(item,index) in newlistAll" :key="index">
                                <router-link :to="{path:'/newsDetail',query:{id:item.id}}">
                                    <img :src="getImage(item.coverImageUrl)" class="img" style="height:135px;width:202px;"/>
                                    <a class="text"><span>{{item.title}}</span></a>
                                </router-link>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- <a href="Article.html" class="index-m-all" target="_blank">查看全部资讯</a> -->
            </div>
            <!-- 资讯活动 end -->

            <!-- <div class="index-house adapt-m" style="margin-top: 10px">
                <div id="mapM" class="tdt-container" style="width: 100%; height: 300px;"></div>
            </div> -->

            <!-- =============================== 电脑版 ================================ -->
            <!-- 热门项目 -->
            <div class="index-main index-country">
                <div class="index-title w">
                    <h2>热门项目 HOT PROJECT</h2>
                </div>
                <ul>
                    <li v-for="(item,index) in projectlist.slice(0, 2)" :key="index+'a'" class="w470">
                         <i class="hovers"></i>
                        <p class="p">{{item.tags.split('###')[0]}}</p>
                        <router-link :to="{ path: '/ProjectDetail', query:{ id:item.id } }">
                            <a href="javascript:;"  class="bg-size" :style="{'background-image': 'url('+getImage(item.projectImage.split('###')[0])+')'}" target="_blank">
                                <div class="text-info">
                                    <span>{{item.projectName}}</span>
                                </div>
                            </a>
                        </router-link>
                    </li>
                    <li v-for="(item,index) in projectlist.slice(2, 6)" :key="index+'b'" class="w225">
                         <i class="hovers"></i>
                        <p class="p">{{item.tags.split('###')[0]}}</p>
                        <router-link :to="{ path: '/ProjectDetail', query:{ id:item.id } }">
                            <a href="javascript:;"  class="bg-size" :style="{'background-image': 'url('+getImage(item.projectImage.split('###')[0])+')'}" target="_blank">
                                <div class="text-info">
                                    <span>{{item.projectName}}</span>
                                </div>
                            </a>
                        </router-link>
                    </li>
                    <li v-for="(item,index) in projectlist.slice(6, 7)" :key="index+'c'" class="w470">
                         <i class="hovers"></i>
                        <p class="p">{{item.tags.split('###')[0]}}</p>
                        <router-link :to="{ path: '/ProjectDetail', query:{ id:item.id } }">
                            <a href="javascript:;" class="bg-size" :style="{'background-image': 'url('+getImage(item.projectImage.split('###')[0])+')'}" target="_blank">
                                <div class="text-info">
                                    <span>{{item.projectName}}</span>
                                </div>
                            </a>
                        </router-link>
                    </li>
                    <li v-for="(item,index) in projectlist.slice(7, 9)" :key="index+'d'" class="w225">
                         <i class="hovers"></i>
                        <p class="p">{{item.tags.split('###')[0]}}</p>
                        <router-link :to="{ path: '/ProjectDetail', query:{ id:item.id } }">
                            <a href="javascript:;"  class="bg-size" :style="{'background-image': 'url('+getImage(item.projectImage.split('###')[0])+')'}" target="_blank">
                                <div class="text-info">
                                    <span>{{item.projectName}}</span>
                                </div>
                            </a>
                        </router-link>
                    </li>
                </ul>
            </div>
            <!-- 快捷入口 -->
            <div class="index-main shortcutEntrance" style="height:auto;">
                <div class="home-section">
                    <h2 class="b">快捷入口</h2>
                    <p>免费获取 为您匹配适合的移民方式</p>
                </div>
                <div class="shortcutEntrance-body">
                    <div class="shortcutEntrance-body_view">
                        <img alt="美国移民" src="@/assets/image/pinggu.png"  class="shortcut-pic">
                        <span class="shortcut-title">移民免费自助评估</span>
                        <span class="shortcut-desc">贵不代表好</span>
                        <span class="shortcut-desc">我们只给您推荐您合适的</span>
                        <router-link to="evaluate">
                            <div class="shortcut-btn" style="color:#fff;">
                                立即评估
                            </div>
                        </router-link>
                    </div>
                    <div class="shortcutEntrance-body_view">
                        <img alt="美国移民" src="@/assets/image/preview.svg"  class="shortcut-pic">
                        <span class="shortcut-title">活动预约</span>
                        <span class="shortcut-desc">预约专家移民讲座</span>
                        <span class="shortcut-desc">了解最新移民资讯</span>
                        <div class="shortcut-btn" @click="reserBtn">立即预约</div>
                    </div>
                    <div class="shortcutEntrance-body_view">
                        <img alt="美国移民" src="@/assets/image/means.svg"  class="shortcut-pic">
                        <span class="shortcut-title">免费资料获取</span>
                        <span class="shortcut-desc">免费领取国家移民资料</span>
                        <span class="shortcut-desc">全面了解移民申请手续</span>
                        <router-link to="information">
                            <div class="shortcut-btn">
                                立即领取
                            </div>
                        </router-link>
                    </div>
                    <div class="shortcutEntrance-body_view shortcutEntrance-body_wechat">
                        <img alt="美国移民" src="@/assets/picture/jiade-qrcode.jpg"  class="wechat-qrcode">
                        <span class="wechat-scan"><img alt="美国移民" src="http://cdn.pacificimmi.com/www.pacificimmi.cn/images/Home/scan.svg" >扫一扫</span>
                        <span class="wechat-desc">了解最新移民活动</span>
                    </div>
                </div>
            </div>
            <!-- 热门国家 -->
            <div class="index-main index-country" style="background: #F5F5F5;">
                <div class="index-title w">
                    <h2>热门国家 HOT COUNTRY</h2>
                </div>
                <div style="display:flex;justify-content:space-between" class="w">
                    <ul class="clearfix hot-country" style="width:78%">
                        <li class='wlis' v-for="(item,index) in countrylistHot.slice(0, 8)" :key="index"
                            @click="seecountry(item)" @mouseenter="handleMouseEnter(item)" @mouseleave="handleMouseLeave()"
                        >
                            <!-- <router-link :to="{path: '/Project', query: {id: item.id} }"> -->
                                <img class="img" :src="getImage(item.mainImage)"/>
                                <div class="text-info1">
                                    <span>{{item.name}}</span>
                                </div>
                            <!-- </router-link> -->
                        </li>
                    </ul>
                    <div style="width:225px" class="showcountry">
                        <div style="display:flex;align-items: center;margin-bottom:16px;">
                             <div class="h5">{{name}}</div>
                            <img class="img" :src="getImage(icon)"/>
                        </div>
                       
                        <div class="cont">{{content}}</div>
                        <div class="seedetail" @click="godetail">查看详情</div>
                    </div>
                </div>
                
            </div>
            

            <!-- 热门房产 start -->
            <div class="index-house adapt-pc" style="padding-bottom:0.1px;">
                <div class="index-title w">
                    <h2 class="b">热门房产</h2>
                    <p>为您精心筛选优质的房源</p>
                </div>
                <div class="houselist w">
                    <!-- 循环 开始 （6个） -->
                    <a class="houseitem" v-for="(item,index) in houselist.slice(0, 6)" :key="index">
                        <router-link :to="{path:'/HouseDetail',query:{id:item.id}}">
                            <div class="bg-img img" :style="{'background-image': 'url('+getImage(item.bannerUrl[0])+')'}">
                                <p class="national-info">{{item.address.split('###')[0]}}</p>
                            </div>
                            <div class="baseinfo text">
                                <h2 class="name">{{item.name}}</h2>
                                <p class="description f-light">{{item.layout}}／{{item.usedArea}}㎡</p>
                            </div>
                            <div class="trend text">
                                <p class="price f-light">
                                     <span class="stress value">{{item.price.split("###")[0]}}</span>
                                </p>
                            </div>
                        </router-link>
                    </a>
                    <!-- 循环 结束 -->
                </div>
                <div class="w">
                    <a class="index-all"><router-link to="House">查看更多房源</router-link></a>
                </div>
            </div>
            <!-- 热门房产 end -->

            <!--  资讯活动 NEWS 电脑-->
            <div class="index-art">
                <div class="index-title w">
                    <h2 class="b">资讯活动 NEWS</h2>
                </div>
                <div class="art-box">
                    <div class="art-left" style="width:65%">
                        <div class="art-title">
                            移民资讯
                            <router-link :to="{path:'/news'}">
                                <p>更多 &#8674</p>
                            </router-link>
                        </div>
                        <ul class="box">
                            <li v-for="(item,index) in newslistYM.slice(0, 2)" :key="index">
                                <router-link :to="{path:'/newsDetail',query:{id:item.id}}">
                                    <img :src="getImage(item.coverImageUrl)" class="img"/>
                                    <div class="flex-column">
                                        <a class="text"><span>{{item.title}}</span></a>
                                        <div class="h-content" v-html="item.content"></div>
                                        <div class="time">{{item.createTime.split(" ")[0]}}</div>
                                    </div>
                                </router-link>
                            </li>
                        </ul>
                        <ul class="newa-two">
                            <li v-for="(item,index) in newslistYM.slice(2, 10)" :key="index">
                                <router-link :to="{path:'/newsDetail',query:{id:item.id}}">
                                    <div class="flex">
                                        <span class="text">
                                            <img alt="资讯" src="@/assets/image/right-sj.png"  class="new-img">
                                            {{item.title}}</span>
                                        <span class="time">{{item.createTime.split(" ")[0]}}</span>
                                    </div>
                                </router-link>
                            </li>
                        </ul>
                        <!-- <div class="w"><a target="_blank" href="Article.html" class="index-all">查看全部资讯</a></div> -->
                    </div>
                    <div style="width:35%">
                        <div class="art-title">集团动态</div>
                        <ul class="box-jituan">
                            <li v-for="(item,index) in newslistJT.slice(0, 2)" :key="index">
                                <router-link :to="{path:'/newsDetail',query:{id:item.id}}">
                                    <div style="width: 100%;">
                                        <img :src="getImage(item.coverImageUrl)" class="img"/>
                                        <a class="text"><span>{{item.title}}</span></a>
                                    </div>
                                </router-link>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="rese-box" v-if="reservation">
                <div class="center-boc">
                    <img src="@/assets/image/close.png" alt="" class="cuo xxx" @click="closerese">
                    <div class="order-modal_title">在线预约</div>
                    <span class="order-modal_desc">我们会对您的信息严格保密,请放心填写</span>
                    <div class="sjh">
                        <span class="sjh-tit">您的姓名：</span>
                        <input type="text" name="name" v-model="contacts">
                    </div>
                    <div class="sjh">
                        <span class="sjh-tit">手机号：</span>
                        <input type="text" name="phone" value="" v-model="contactsPhone" class="username" onkeyup="value = value.replace(/[^\d]/g,'')">
                    </div>
                    <div class="click" @click="save">提交</div>
                </div>
            </div> 
            <!-- =============================== 公共 ================================== -->
            <!-- <div class="index-map">
                <div class="center">
                    <div class="index-m-title">
                        <h2 class="b">您的移民私人顾问</h2>
                        <p>为您量身定制的移民整体解决方案</p>
                    </div>
                    <div class="box">
                        <div class="inp">
                            <input type="number" onkeypress="return (/[0-9]/.test(String.fromCharCode(event.keyCode)))" placeholder=" 输入电话">
                        </div>
                        <botton class="bot adapt-pc">免费移民评估</botton>
                        <botton class="bot adapt-m">免费评估</botton>
                    </div>
                    <span class="error icon-tanhao-copy">&nbsp;&nbsp;请输入有效的手机号!</span>
                </div>
            </div> -->
            <!-- =============================== 公共 ================================== -->
            
            
            <!-- <div class="click-box" v-if="promptshow">
                <div>
                    <img src="" alt="" class="dui">
                    <img src="@/assets/image/close.png" alt="" class="cuo xxx" @click="close">
                    <span style="margin-top:30px;">您的私人规划师会在2小时内跟您沟通～</span>
                    <p>我们会对您的电话严格保密，请保持电话畅通。<br>公休假日可能会顺延，请您耐心等候。</p>
                    <em class="xxx" @click="close">我知道了</em>
                </div>
            </div> -->

            <!-- 地图 -->
            <div class="index-house adapt-pc" style="margin-top: 10px; padding: 20px 0;">
                <div id="map" class="tdt-container" style="width: 980px; height: 600px; margin: 0 auto;"></div>
            </div>
        </div>
        <loading :loadingState="loadingState" />
    </div>
</template>

<script>
    (function(doc, win, undefined) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize',
            recalc = function() {
                var clientWidth = docEl.clientWidth;
                if (clientWidth === undefined) return;
                docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
            };
        if (doc.addEventListener === undefined) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false)
    })(document, window);
</script>
<script>
    import { mapGetters } from 'vuex'
    import Swiper from 'swiper'
    import loading from "@/components/loading.vue";
    import httpApi from '@/api/index' // 接口

  export default {
    name: 'index',
    data() {
      return {
        reservation:false,
        promptshow:false,
        bannerlist:[],
        allcountryShow:false,
        phoneMenu:false,
        navIndex:0,
        id:'',
        projectlist:[],
        newslistYM:[],
        newslistJT:[],
        contactsPhone:'',
        contacts:'',
        houselist:[],
        countrylistHot:[],
        countrylistMap:[],
        newlistAll:[],
        page:1,
        pagesize:10,
        activeIndex:1,
        tabContents: [ // Tab对应的内容列表

        ],
        content:'',
        name:'',
        icon:'',
        cuntryId:'',
        loadingState: true,
        // map: null,
        mapIcon: require('@/assets/image/pos.png')
      }
    },
    computed: {
      ...mapGetters([ 'baseApi' ])
    },
    created () {
      this.getList();
    },
    mounted() {
    },
    methods: {
        getImage(url){
            return this.baseApi + url;
        },
        getList() {
            //banner
            httpApi.getBanner().then(res => {
                this.bannerlist = res.data
                this.getSwiper();
            })
            httpApi.getProjectHot().then(res => {
                this.projectlist = res.data;
            })
            httpApi.getNews({ limit: 20, page: 1 }).then(res => {
                this.newlistAll = this.newlistAll.concat(res.data)
                this.newlistAll.forEach(item => {
                    if(item.type == 1){
                        this.newslistYM.push(item);
                    }else{
                        this.newslistJT.push(item);
                    }
                })
                this.loadingState = false;
            })
            httpApi.gethouse().then(res => {
                res.data.forEach(item => {
                    if(item.bannerUrl != null){
                        item.bannerUrl = item.bannerUrl.split("###");
                    }else{
                        item.bannerUrl = []
                    }
                    this.houselist.push(item);
                });
            })
            httpApi.getcountry().then(res => {
                let data = res.data;
                data.forEach(item => {
                    if(item.continent.id == 0){
                        this.countrylistHot = item.countryList;
                        this.content = item.countryList[0].detail;
                        this.name = item.countryList[0].name
                        this.icon = item.countryList[0].icon
                    }else{
                        item.countryList.forEach(cItem => {
                            cItem.projectList = [];
                            this.countrylistMap.push(cItem);
                        })
                    }
                })
            });

            // 所有项目
            let params = {
                countryId: '',
                limit: 100,
                page: 1,
            }
            httpApi.getProjectList(params).then(res => {
                let data = res.data;
                this.countrylistMap.forEach(item => {
                    data.forEach(lItem => {
                        if(item.id == lItem.countryId){
                            item.projectList.push(lItem);
                        }
                    })
                });

                this.GetMapInfo();
            })
        },
        changeActiveIndex(newIndex,item) {
            
            this.activeIndex = newIndex;
            console.log(newIndex,this.activeIndex,item,'有信息吗')
             this.tabContents.push(item.detail)
             console.log(this.tabContents,'-----')
            // this.tabContents = 
        },
        seecountry(item){
            this.content = item.detail;
            this.name = item.name
            this.icon = item.icon
        },
        handleMouseEnter(item) {
            // this.isShowContent = true;
            this.cuntryId = item.id
            this.content = item.detail;
            this.name = item.name
            this.icon = item.icon
        },
        godetail(){
            this.$router.push({ 
                path: '/Project',
                query:{
                    id:this.cuntryId
                }
            })
        },
        handleMouseLeave() {
            // this.detail = '';
            //  this.name = '';
        },
        showAll(){
            this.allcountryShow = !this.allcountryShow
        },
        showNenu(){
            this.phoneMenu = true
        },
        closeMenu(){
            this.phoneMenu = false
        },
        changeNav (index, type) {
            this.navIndex = index
        },
        close(){
            this.promptshow = false
        },
        reserBtn(){
            this.reservation = true
        },
        closerese(){
            this.reservation = false
        },
        save(){
            if(!this.contacts){
                this.$message.error( '请输入您的姓名')
            }
            if (!/^1[0-9]{10}$/.test(this.contactsPhone)){
                this.$message.error( '请输入手机号')
            }
            httpApi.apply({
                contacts:this.contacts,
                contactsPhone:this.contactsPhone,
            }).then(res => {
                if (res.success) {
                    this.reservation = true
                    this.$message.success('提交成功')
                    
                }
            })
        },
        getSwiper () {
            setTimeout(() => {
                new Swiper('.swiper-container', {
                    effect : 'fade',
                    loop: true,
                    autoplay: {
                        delay: 5000,
                        stopOnLastSlide: false,
                        disableOnInteraction: false,
                    },
                    pagination: {
                        el: '.swiper-pagination',
                        dynamicBullets: true,
                        dynamicMainBullets: 2,
                        clickable: true,
                        type: 'custom',
                        renderCustom: (swiper, current, total) => {
                            let str = ''
                            for(let i=0; i<total; i++){
                                if(i+1 == current){
                                    str += '<span class="page-item"><i class="page-process"></i></span>';
                                }
                                else{
                                    str += '<span class="page-item"></span>';
                                }
                            }
                            return str;
                        }
                    }
                })
            }, 500)
        },
        // 地图
        GetMapInfo() {
            var T = window.T;
            this.map = new T.Map('map'); // div的id
            // this.map.centerAndZoom(new T.LngLat(46.71667,24.63333), 3); // 沙特阿拉伯
            this.map.centerAndZoom(new T.LngLat(2.20240,42.51360), 2); // 埃及

            // 手机
            // this.mapM = new T.Map('mapM'); // div的id
            // this.mapM.centerAndZoom(new T.LngLat(31.23528,30.04167), 1); // 埃及

            this.point(this.map); // PC
            // this.point(this.mapM, 1); //移动端、级别
        },
        point(mapBox, minZoom) {
            var T = window.T;
            mapBox.clearOverLays();

            d3.json('/TiandiMap/countries.geo.json', (data) => {
                var countriesOverlay = new T.D3Overlay(this.init, this.redraw);
                this.countries = data.features;
                mapBox.addOverLay(countriesOverlay)
            });

            // 点位数据
            this.countrylistMap.forEach((item) => {
                let icon = new T.Icon({
                    iconUrl: this.mapIcon,
                    iconSize: new T.Point(12, 12)
                });
                // 图标
                let lnglat = new T.LngLat(item.longitude, item.latitude);
                let marker = new T.Marker(lnglat,{ icon: icon });

                let label = new T.Label({
                    text: item.name,
                    position: lnglat,
                    offset: new T.Point(-6, 0)
                });
                label.setFontSize(8);

                // 将标注添加到地图中
                mapBox.addOverLay(marker); // 打点图标
                mapBox.addOverLay(label); // 国家名字

                mapBox.setMinZoom(minZoom ? minZoom : 2);
                mapBox.setMaxZoom(3);

                var infoWin1 = new T.InfoWindow();
                var sContent = "<ul class='map-project-list' style='max-height: 100px;overflow-y: auto;'>";
                item.projectList.forEach(pItem => {
                    sContent += `<li style="background: #006C2E;padding:4px;margin-bottom:2px;"><a href="/ProjectDetail?id=`+pItem.id+`" style="color: #fff;line-height: 20px;">`+pItem.projectName+`</a></li>`
                })
                sContent += "</div>";
                infoWin1.setContent(sContent);

                // 将标注添加到地图中
                marker.addEventListener("click", function () {
                    marker.openInfoWindow(infoWin1);
                });
                label.addEventListener("click", function () {
                    marker.openInfoWindow(infoWin1);
                });

                mapBox.disableScrollWheelZoom(); //禁止鼠标滚轮缩放地图
                mapBox.disableInertia(); // 禁止鼠标地图惯性拖拽
                mapBox.disableDoubleClickZoom();


                // 点位的点击事件，展示弹窗
                // marker.addEventListener("click", () => {
                //     this.$router.push({
                //         path: '/Project',
                //         query:{ id: item.id }
                //     })
                // },false);
                // label.addEventListener("click", () => {
                //     this.$router.push({
                //         path: '/Project',
                //         query:{ id: item.id }
                //     })
                // },false);


            });
        },
        init(sel, transform) {
            var ff = 0;
            var nos = "";
            var upd = sel.selectAll('path.geojson').data(this.countries);
            //提示框的div
            var jsonData = this.countrylistMap;

            upd.enter()
                .append('path')
                .attr("class", "geojson")
                .attr('stroke', 'white')
                .attr('fill', (d, i) => {
                    var dd = 0;

                    for (var s = 0; s < jsonData.length; s++) {
                        if (jsonData[s].englishName == d.properties.name) {
                            var color = '#139e55';

                            ff++;
                            dd++;
                            if (color != "") {
                                return d3.hsl(color);
                            }
                        }
                    }
                    if (dd == 0) {
                        nos += d.properties.name + ","
                    }
                    const colorArr = ['rgb(210,220,214)','rgb(234,233,228)','rgb(213,216,232)','rgb(254,248,227)','rgb(227,208,206)','rgb(198,219,233)'];
                    return d3.hsl(colorArr[Math.floor(Math.random()*colorArr.length)]);
                })
            upd.on("click", (d) => {
                //  alert(1)
            });
        },
        //主要重新计算坐标点转到容器点。
        redraw(sel, transform) {
            //  console.log("redraw");
            sel.selectAll('path.geojson').each(
                function (d, i) {
                    d3.select(this).attr('d', transform.pathFromGeojson) //pathFromGeojson:D3 中geojson设置path元素的d属性。
                }
            )

        },
    },
    name: "IndexView",
    components: {
      loading
    }
  }
</script>

<style>

@media(max-width: 1080px){
   .search-header .center form .input-search{width: 90px;}
}
@media(max-width: 960px){
    .search-header{display: none;}
}
/* .content-main{
    height: 430px;
} */
.swiper-container {
    width: 100%;
    height: 100%;
}
.swiper-container .swiper-slide {
    text-align: center;
    font-size: 18px;
    background-color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.swiper-container .swiper-slide img{
    width:100%;
    height: 100%;
    object-fit: cover;
}

.content-swiper>.swiper-pagination {
    bottom: 147px;
    width: 960px;
    left: 50%;
    margin-left: -480px;
    text-align: left;
}
.content-swiper>.swiper-pagination .swiper-pagination-bullet {
    width: 60px;
    height: 2px;
    border-radius: 1px !important;
}
.swiper-button-prev:after, .swiper-button-next:after{
    display: none;
}
.swiper-button-next:after, .swiper-button-prev:after{
    display: none;
}
.swiper-pagination-bullet:first-child {
    margin-left: 0 !important;
}

@media only screen and (max-width: 960px) {
    .content-swiper>.swiper-pagination {
        bottom: 10px;
        width: 100%;
        left: 0;
        margin-left: 20px;
        text-align: left;
    }
}

/*友情链接*/
.media {
    height: auto;
    overflow: hidden;
    padding:0;
    width: 82%;
    margin-left:18.5%;
    background: none;
}
.media_c {
    width: 100%;
    margin: 0 auto;
}
.media .f_t {
    color: #565a5c;
    font-size: 14px;
    overflow: hidden;
}
.media span {
    float: left;
    margin-right: 20px;
}
.media a {
    float: left;
    margin-right: 40px;
    font-size: 14px;
    color: #82888a;
}
.media a:hover {
    color: #006C2E;
}

.tdt-container{
    background: transparent;
}
.tdt-control-container{
    display: none;
}
.tdt-tile-pane .tdt-layer:first-of-type .tdt-tile-container img{
    opacity: 0!important;
}
.tdt-label{
    padding: 0 0 0 2px!important;
    color: #333;
    /*text-shadow: 0 0 5px #006C2E;*/
    background: transparent;
    border: none;
    font-weight: bold;
    box-shadow: none;
}
</style>
<style lang="scss" scoped>
@import "src/assets/css/indexView";
</style>